<script setup>
import { computed, ref } from 'vue';

const isChecked = ref(false);
const changeCount = ref(0);

const handleChange = () => {
  changeCount.value++;
};

// For indeterminate example
const items = ref([
  { name: 'Item 1', checked: false },
  { name: 'Item 2', checked: false },
  { name: 'Item 3', checked: false },
]);

const allChecked = computed(() => {
  return items.value.every((item) => item.checked);
});

const indeterminate = computed(() => {
  return items.value.some((item) => item.checked) && !allChecked.value;
});

const onSelectAllChange = (e) => {
  items.value.forEach((item) => {
    item.checked = e.target.checked;
  });
};

const onItemChange = () => {
  // This will trigger a re-evaluation of computed properties
};

// For checkbox group example
const options = ref([
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
]);

const selectedOptions = ref(['option1']);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">CheckBox Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic CheckBox</h3>
        <div class="flex flex-col space-y-4">
          <div class="flex items-center gap-2">
            <CheckBox v-model="isChecked" @change="handleChange" />
            <span>Basic checkbox</span>
          </div>
          <div>
            Checkbox state: {{ isChecked ? 'Checked' : 'Unchecked' }}
            <span v-if="changeCount > 0">
              (Changed {{ changeCount }} times)
            </span>
          </div>

          <div class="flex items-center gap-2">
            <CheckBox checked />
            <span>Initially checked</span>
          </div>

          <div class="flex items-center gap-2">
            <CheckBox disabled />
            <span>Disabled (unchecked)</span>
          </div>

          <div class="flex items-center gap-2">
            <CheckBox disabled checked />
            <span>Disabled (checked)</span>
          </div>

          <div class="mt-4 flex items-center gap-2">
            <Button appearance="outline" @click="isChecked = !isChecked">
              Toggle Programmatically
            </Button>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">CheckBox Variations</h3>
        <div class="flex flex-col space-y-4">
          <div>
            <h4 class="mb-2 text-sm font-medium">Indeterminate State</h4>
            <div class="flex flex-col gap-2">
              <div class="flex items-center gap-2">
                <CheckBox
                  :checked="allChecked"
                  :indeterminate="indeterminate"
                  @change="onSelectAllChange"
                />
                <span>Select All</span>
              </div>

              <div class="ml-4">
                <div
                  v-for="(item, index) in items"
                  :key="index"
                  class="mt-1 flex items-center gap-2"
                >
                  <CheckBox v-model="item.checked" @change="onItemChange" />
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">With Label</h4>

            <div class="flex items-center gap-2">
              <CheckBox id="terms" />
              <Label for="terms"> I agree to the terms and conditions </Label>
            </div>
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">Custom Colors</h4>

            <div class="flex items-center gap-4">
              <CheckBox class="accent-blue-500" checked />
              <CheckBox class="accent-green-500" checked />
              <CheckBox class="accent-red-500" checked />
              <CheckBox class="accent-purple-500" checked />
            </div>
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">Checkbox Group</h4>

            <div class="flex flex-col gap-2">
              <div
                v-for="option in options"
                :key="option.value"
                class="flex items-center gap-2"
              >
                <CheckBox
                  :value="option.value"
                  v-model:checked="selectedOptions"
                  :name="`option-${option.value}`"
                  custom-value
                />
                <span>{{ option.label }}</span>
              </div>
            </div>

            <div class="mt-2">Selected: {{ selectedOptions.join(', ') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
